<template>
    <el-drawer v-model="isDrawerVisible" title="用户详情" :with-header="true">
        <el-descriptions direction="vertical" :column="1" size="large" border>
            <el-descriptions-item label="用户ID">{{user.id}}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{user.userName}}</el-descriptions-item>
            <el-descriptions-item label="用户密码">{{user.pwd}}</el-descriptions-item>
            <el-descriptions-item label="用户头像">{{user.avatar}}</el-descriptions-item>
            <el-descriptions-item label="用户昵称">{{user.nc}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{user.phone}}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{user.email}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{user.sex}}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{user.createTime}}</el-descriptions-item>
            <el-descriptions-item label="用户状态">{{user.status}}</el-descriptions-item>
            <el-descriptions-item label="用户店铺数">{{user.shopCount}}</el-descriptions-item>
        </el-descriptions>
    </el-drawer>
</template>

<script setup lang="ts">

// 控制抽屉的显示
import {ref} from "vue";

const isDrawerVisible = ref(false);

const user = ref({
    id: '',
    userName: '',
    pwd: '',
    avatar: '',
    nc: '',
    sex: '',
    phone: '',
    createTime: '',
    email: '',
    status: '',
    shopCount: ''
});

// 接收父组件传递过来的 用户 数据
const handleDetailData = (obj) => {
    isDrawerVisible.value = true;
    user.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
    handleDetailData
})
</script>

<style scoped>

</style>